font 是由以下屬性組成的速記屬性：

• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• line-height

範例

 font: 300 italic 1.3em/1.7em "FB Armada", sans-serif;
 font: italic small-caps bold 12px/30px Georgia, serif;

font 屬性必須包含font-size 和 font-family 的屬性值 ，缺少任ㄧ屬性值 font 的樣式就無效

例如：

❌ 只設定 font-size

font: 20px;

✅

font: 20px "Fira Sans", sans-serif;

其餘的屬性可以選擇是否要設定，需注意在語法上：

• font-style font-variant font-weight 的值須放在 font-size 值前面
• font-family 必須放在最後一個值
• line-height 須接在 font-size 後方，並用 / 隔開，例如 16px/1.5
• font-variant 也是速記屬性

font-variant

在 font 屬性可以僅設定 normal 與small-caps 即可

• font-stretch 只能為一個關鍵字值 ( keyword value )，例如 condensed

除了可以當成速記屬性設定上方的屬性值，也可以使用 font 設定單一系統字體，根據 15.8速記字體屬性 或是 mdn 等文件中，系統字體值有以下：

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

可以讓網頁中的文字和套用和使用者的作業系統字型，詳細可參考上方連結或第五章：字型（12） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

需注意系統字體是使用 font 屬性來設定而非 font-family
因自己練習時通常是使用線上像是 google fonts 指定字體，沒有設定過系統字體，這方面較不熟悉

參考資料：
15.8速記字體屬性
font
第五章：字型（12） - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天